﻿@model List<HQPad.Models.ItemBase>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    string name = (string)ViewBag.CharacterName;
    HQPad.Models.SilhouetteRecord silhouette = (HQPad.Models.SilhouetteRecord)ViewBag.Silhouette;
    HQPad.Models.CharacterHeader header = (HQPad.Models.CharacterHeader)ViewBag.Header;
}

<script src="@Url.Content("~/Scripts/waiter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/character.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/editable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/item.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/messagelist.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/global.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $.fn.character({
            raceChangeActionUrl: '@Url.Action("SetRace")',
            classChangeActionUrl: '@Url.Action("SetClass")',
            headerContainerSelector: '.header-container',
            tableChangeCallback: null,
            guildChangeActionUrl: '@Url.Action("SetGuild")',
            guildChangeCallback: null,
            recordContainerSelector: '.record-container',
            addRecordItemUrl: '@Url.Action("AddRecord")',
            addRecordCallback: null,
            headerUrl: '@Url.Action("RefreshHeader")',
            headerRefreshedCallback: function () {
                $('.header-container .tooltipable[title]').tooltip();
            },
            updateNameUrl: '@Url.Action("UpdateName")',
            saveUrl: '@Url.Action("SaveCharacter")',
            silhouetteUrl: '@Url.Action("RefreshSilhouette")',
            silhouetteContainerSelector: '.silhouette-container',
            silhouetteRefreshedCallback: function () {
                // set up generic tooltips.
                $('.tooltipable', '.silhouette-container').tooltip();

                // set up named tooltips.
                setupSilhouette();
            }
        });

        bindModals(true, true);

        // set up generic tooltips.
        $('.tooltipable[title]').tooltip();

        setupSilhouette();

        $('.armour-container').item({
            updateItemUrl: null,
            updateItemCallback: null,
            removeItemLinkSelector: '.remove-item',
            removeItemCallback: function (link) {
                var $parent = $(link.parents('li')[0]);
                $parent.fadeOut(500);
                $parent.remove();
                //                $('.armour-container').armour('refreshArmourList');
                //                $('.armour-container .modal-window').nyroModal({ sizes: { initW: 300, initH: 400} });
                $.fn.character('refreshSilhouette');
            },
            itemListUrl: '@Url.Action("RefreshItem")',
            itemListContainerSelector: '.armour-container',
            refreshItemCallback: function () {
                bindModals(false, true);
            },
            equipLinkSelector: '.equip-item',
            equipItemCallback: function () {
                $('.armour-container').item('refreshItemList');
                $.fn.character('refreshSilhouette');
            }
        });

        setupMessageList(); // defined in global.
    });

    function bindModals(bindActions, bindItems) {
        if (bindActions) {
            // set up modal window links.
            $('.armour-actions .modal-window').nyroModal({
                sizes: { minW: 400, initH: 730, minH: 730, h: 730 },
                callbacks: {
                    afterShowCont: modalAfterShowCont
                }
            });

            $('.armour-actions .modal-window-custom-long').nyroModal({
                type: 'iframe',
                sizes: { minW: 400, initH: 800, minH: 800, h: 800 },
                callbacks: {
                    afterClose: afterModalClose,
                    afterShowCont: modalAfterShowContLong

                }
            });
        }

        if (bindItems) {
            $('.armour-container .modal-window').nyroModal({ 
                sizes: { minW: 400, initH: 730, minH: 730, h: 730 },
                callbacks: {
                   afterShowCont: modalAfterShowCont
                }
            });

            $('.armour-container .modal-window-custom').nyroModal({
                sizes: { minW: 400, initH: 730, minH: 730, h: 730 },
                callbacks: {
                   afterClose: afterModalClose,
                   afterShowCont: modalAfterShowCont
                }
            });

            $('.armour-container .modal-window-custom-long').nyroModal({
                type: 'iframe',
                sizes: { minW: 400, initH: 800, minH: 800, h: 800 },
                callbacks: {
                   afterClose: afterModalClose,
                   afterShowCont: modalAfterShowCont
                }
           });        
        }
    }

    /*
     * Handle refresh of page content after modal window closes.
     */
    function afterModalClose(nm) { 
        $('.armour-container').item('refreshItemList');
        $.fn.character('refreshSilhouette');
    }

    function modalAfterShowCont (nm) {
        $('.nyroModalCont').addClass('custom-modal');
    }

    function modalAfterShowContLong(nm) {
        $('.nyroModalCont').addClass('custom-modal-long');
    }

    function closeModalAndRefresh() {
        $.nmTop().close();

        //$('body').character('refreshHeader');
        $('.armour-container').item('refreshItemList');
        $.fn.character('refreshSilhouette');
        $('.tooltipable[title]').tooltip();
    }

    function setupSilhouette() {
        // set up named tooltips.
        $('.named-tooltip', '.silhouette-container').each(function () {
            var tipId = $(this).attr('tip');

            $(this).tooltip({
                tip: '#tooltip-' + tipId,
                position: 'top center',
                offset: [10, 10],
                events: {
                    tooltip: 'mouseleave'
                }
            });
        });
    }
</script>

<h1 class="with-control-box character-name">@Html.Raw(name)</h1>
<div class="message-box"></div>

<section class="full-width header-container">
@Html.Partial("~/Views/Shared/Character/CharacterHeader.cshtml", header)
</section>

@Html.Partial("~/Views/Shared/Character/CharacterTabs.cshtml", header)

<section class="content flush-with-nav flat-top armour-container">
@Html.Partial("~/Views/Shared/Character/CharacterItems.cshtml", Model)
</section>

<section class="sidebar flush-with-nav">
    <div class="silhouette-container">
        @Html.Partial("~/Views/Shared/Character/CharacterSilhouette.cshtml", silhouette)

    </div>
    <div class="sidebar-container armour-actions sidebar-bottom-margin">
        <h2>Actions</h2>
        <div>
            @Html.ActionLink("Add Item", "EditItem", "Character", null, new { @class = "edit-record modal-window-custom-long button", @target = "_blank" })
        </div>
        <div>
            @Html.ActionLink("Add Ability", "EditAbility", "Character", null, new { @class = "edit-record modal-window-custom-long button", @target = "_blank" })
        </div>
        <div>
            @Html.ActionLink("Add Scroll", "EditScroll", "Character", null, new { @class = "edit-record modal-window button", @target = "_blank" })
        </div>
    </div>
</section>
